import React, {Component} from 'react';
import Nav from './HomePage/Nav';
import {StyleSheet, View, KeyboardAvoidingView} from 'react-native';
import {Container, Content, Text} from 'native-base';
import {GiftedChat, Actions, Bubble, SystemMessage, MessageContainer} from 'react-native-gifted-chat';
import {connect} from 'react-redux';
import {isAndroid} from '../../../utils/utils';
import 'moment/locale/zh-cn';

const styles = StyleSheet.create({
	msgContainer: {
		
	},
});

@connect(state => ({state: {...state.group}}))
export default class GroupChatPage extends Component {
    render() {
    	let dispatch = this.props.dispatch;
    	let {messages} = this.props.state;
    	let msgContainerStyle;
    	let pageNode = (
    		<View style={{flex: 1}}>
	    		<Nav title='聊天' />
	        	<View style={{flex: 1}}>
	        		<GiftedChat 
	        		style={{justifyContent: 'center'}} 
			        messages={messages}
			        onSend={messages => {
			        	dispatch({
			        		type: 'group/appendMessage',
			        		payload: messages
			        	});
			        }}
			        user={{_id: 1}} 
			        renderAvatarOnTop={true} 
			        locale='zh-cn' 
			        />
			    </View>
		    </View>
    	);
    	// 处理Android输入框不弹出
    	if(isAndroid()) {
    		pageNode = (
    			<KeyboardAvoidingView style={{flex: 1}} behavior='padding'>
    				{pageNode}
    			</KeyboardAvoidingView>
    		);
    	}
        return pageNode;
    }
}